<template>
  <!--显示加载画面-->
  <div v-loading="loading">
  <!--帖子信息区域 循环data中的数据-->
    <div v-for="item in article" :key="item.index" style="margin-left:15px;margin-top: 20px;">
      <div>
        <div style="display: inline-block">
          <el-popover placement="right" trigger="hover" width="300" @show="mouseOver(item.users.usersId)" @hide="mouseLeave">
            <el-image style="width: 100%; height: 100px" :src="multipleAttention.usersFirstImage" />
            <br>
            <div>
              <div style="display: inline-block">
                <el-avatar :size="35" :src="multipleAttention.usersPortrait"/>
              </div>
              <div style="display: inline-block">
                <div>
                  <h3>{{ multipleAttention.usersName }}</h3>
                </div>
                <div>
                  关注量：{{ multipleAttention.attentionNum }} &nbsp; 粉丝量：{{ multipleAttention.followNum }}
                </div>
              </div>
            </div>
            <el-divider />
            <div style="width: 35%;display: inline-block;" v-if="multipleAttention.attentionState === 0">
              <el-button type="primary" plain style="width: 100%" @click="addAttention(multipleAttention.usersId)">关注</el-button>
            </div>
            <div v-if="multipleAttention.attentionState === 1" style="width: 35%;display: inline-block;">
              <el-button type="primary" style="width: 100%" @click="reduceAttention(multipleAttention.usersId)">已关注</el-button>
            </div>
            <div style="width: 60%;display: inline-block;">
              <el-button style="width: 100%" @click="goUsersMessage(multipleAttention.usersId)">进入个人首页</el-button>
            </div>
            <el-avatar :size="35" :src="item.users.usersPortrait" slot="reference"/>
          </el-popover>
        </div>
        <div style="display: inline-block">
          <div>{{ item.users.usersName }}</div>
          <div style="size: A3;margin-top: 4px;" class="el-icon-collection">
            {{ item.community.communityName }}
          </div>
        </div>
        <!--发布时间 - 通过主文件已配置的时间格式显示-->
        <div class="el-icon-timer">
          <TimeDisposal :date="item.articleCreatingTime" />
        </div>
      </div>
      <div style="margin-top: 4px;font-weight: bolder;font-size: 110%">
        <a @click="articleTitle(item.articleId)">
          {{ item.articleTitle }}
        </a>
      </div>
      <div class="articleContentDiv" v-html="transitionHtml(item.articleContent)" />
      <div v-if="item.articleFirstImage === (global.recommendImg+'/static/img/推荐.jpg')" />
      <div v-else style="margin-top: 4px">
        <el-image :src="item.articleFirstImage" style="width: 30%"/>
      </div>
      <div style="margin-right: 30px;margin-top: 3px">
        <div style="display: inline-block">
          <el-button type="primary" plain class="el-icon-star-off" size="mini" @click="collectArticle(item)">收藏</el-button>
        </div>
        <div style="display: inline-block;margin-left:15px;color: #475669;font-size: 13px">
          <i class="el-icon-circle-check" />
           {{ item.articleLike }}个赞
        </div>
        <div style="display: inline-block">
          <div class="el-icon-chat-dot-round" style="margin-left:15px;color: #475669;font-size:13px">
            {{ item.commentSize }}条评论
          </div>
        </div>
      </div>
      <el-divider />
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="收藏列表" :lock-scroll="false" style="max-width: 1200px;margin: auto" @close="handleClose()">
        <div v-if="collectList.length === 0">
          <el-empty description="请创建收藏夹再进行收藏哦" />
        </div>
        <div v-for="item in collectList" style="display: inline-block;width: 97%">
          <div style="display: inline-block;" @click="goCollect(item)">
            {{ item.collectName }}
          </div>
          <div style="display: inline-block;float: right">
            <div v-if="item.collectState === 1">
              <el-button type="text" @click="deleteCollectArticle()">取消收藏</el-button>
            </div>
            <div v-else>
              <el-button type="text" @click="insertCollectArticle(item)">收藏</el-button>
            </div>
          </div>
          <el-divider />
        </div>
      <br>
      <br>
      <div>
        <el-input v-model="collectContent" placeholder="请输入想创建的收藏夹" style="width: 400px;display: inline-block" />
        <el-button style="width: 100px;display: inline-block" type="primary" @click="insertCollect()">新建收藏夹</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "../../../utils/request";
import TimeDisposal from "../../../components/timeDisposal";
import {marked} from 'marked'
import { gotoNewWindow } from "../../../utils/sameMethod";

export default {
  name: "recommend",
  components:{
    TimeDisposal
  },
  data:function (){
    return{
      dialogFormVisible:false,
      article:[],
      /*是否加载画面*/
      loading:false,
      getArticleContentState:true,
      users:{},
      commentListSize:0,
      collectArticleItem:{},
      collectList:[],
      collectBody:{},
      collectContent:"" ,
      multipleAttention:{},
      collectClickCount:0
    }
  },
  methods:{
    goCollect(item){
      this.$router.push({
        path:"/collectArticle/"+item.collectName+'/'+item.collectId,
      })
    },
    transitionHtml(content){
      return marked(content);
    },
    goUsersMessage(usersId){
      this.$router.push({
        path:"/userHome/"+usersId
      })
    },
    addAttention(usersId){
      let attentionState=0;
      let followUsersId=this.users.usersId;
      request.get('/attention/updateAttention/'+usersId+'/'+followUsersId+'/'+attentionState).then((res =>{}))
      this.multipleAttention.followNum++;
      this.multipleAttention.attentionState=1;
    },
    reduceAttention(usersId){
      let attentionState=1;
      let followUsersId=this.users.usersId;
      request.get('/attention/updateAttention/'+usersId+'/'+followUsersId+'/'+attentionState).then((res =>{}))
      this.multipleAttention.followNum--;
      this.multipleAttention.attentionState=0;
    },
    mouseLeave(){
      this.multipleAttention=this.$options.data().multipleAttention;
    },
    mouseOver(articleUsersId){
      request.post('/attention/getUserAttention/'+articleUsersId+'/'+this.users.usersId).then((res =>{
        this.multipleAttention=res.data;
      }))
    },
    collectArticle(item){
      this.collectArticleItem=item;
      this.dialogFormVisible=!this.dialogFormVisible;
      request.get('/collect/getCollect/'+this.users.usersId+'/'+item.articleId).then((res =>{
            this.collectList=res.data;
          })
      )
    },
    handleClose(){
      this.collectClickCount=0
    },
    insertCollect(){
      this.collectBody=this.$options.data().collectBody;
      if (this.collectContent === ""){
        this.$message({
          type:"warning",
          message:"请输入收藏夹名字~",
          offset:75
        })
        return
      }
      if(this.collectList.length === 5){
        this.$message({
          type:"warning",
          message:"收藏夹已上限哦",
          offset:75
        })
        return;
      }
      this.collectBody.collectArticle=this.collectArticleItem.articleId;
      this.collectBody.collectName=this.collectContent;
      this.collectBody.collectUsers=this.users.usersId;
      request.post('/collect/insertCollect',this.collectBody).then((res =>{
        this.collectList=res.data;
      }))
    },
    deleteCollectArticle(){
      this.collectClickCount++;
      request.delete('/collect/deleteCollectArticle/'+this.users.usersId+'/'+this.collectArticleItem.articleId).then((res =>{
        this.collectList=res.data;
        this.$message.success("取消收藏成功")
      }))
    },
    insertCollectArticle(item){
      this.collectClickCount++;
      this.collectBody=this.$options.data().collectBody;
      this.collectBody.collectArticle=this.collectArticleItem.articleId;
      this.collectBody.collectTarget=item.collectId;
      this.collectBody.collectUsers=this.users.usersId;
      request.post('/collect/insertCollect',this.collectBody).then((res =>{
        this.collectList=res.data;
        this.$message.success("收藏成功")
      }))
    },
    articleTitle(articleId){
      gotoNewWindow(articleId,"content","detail");
    },
    initArticle(){
        this.loading=true
        request.get('/article/initArticle').then( res => {
          this.article=res.data
          this.loading=false;
        })
    },
    handleScroll() {
      let top = Math.floor(window.pageYOffset)
      let totalLength=document.documentElement.scrollHeight * 0.30
      if (top >= totalLength && this.getArticleContentState === true){
        this.getArticleContentState=false;
        request({url:'/article/getArticleContent', method: 'get', param:this.users.usersId}).then((res)=>{
          let newArticleData=res.data;
          this.article=this.article.concat(newArticleData);
          this.getArticleContentState=true;
        })
      }
    }
  },
  created() {
    this.users=JSON.parse(localStorage.getItem("userData"))
  },
  mounted() {
    this.initArticle()
    window.addEventListener('scroll', this.handleScroll, true)
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
}
.articleContentDiv{
  margin-top: 10px;
  display: -webkit-box;
  display: -moz-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
}
.articleContentDiv >>> img{
  display: none;
}
.articleContentDiv >>> h1{
  font-size: 13px;
}
.articleContentDiv >>> h2{
  font-size: 13px;
}
.articleContentDiv >>> h3{
  font-size: 13px;
}
.articleContentDiv >>> h4{
  font-size: 13px;
}
.articleContentDiv >>> h5{
  font-size: 13px;
}
.articleContentDiv >>> h6{
  font-size: 13px;
}
</style>